<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->

        <link rel="stylesheet" href="../css/style.css">
        <script src="../js/echarts.js"></script>
        <style>
            .el-header, .el-footer {
                background-color: #B3C0D1;
                color: #333;
                text-align: center;
                line-height: 60px;
            }

            .el-aside {
                background-color: #D3DCE6;
                color: #333;
                text-align: center;
                line-height: 200px;
            }

            .el-main {
                background-color: #E9EEF3;
                color: #333;
                text-align: center;
                line-height: 160px;
            }

            body > .el-container {
                margin-bottom: 20px;
            }

            .el-container:nth-child(5) .el-aside,
            .el-container:nth-child(6) .el-aside {
                line-height: 260px;
            }

            .el-container:nth-child(7) .el-aside {
                line-height: 320px;
            }
        </style>
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>统计分析<small>会员数量</small></h1>
                <!--日期选择-->
            </div>

            <div class="block" style="margin-left:7em">
                <!--提示用户的标签-->
                <el-tag size="medium" type="success">自定义检索时间</el-tag>
                <!--<el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        format="yyyy 年 MM 月 dd 日"
                        unlink-panels="false"
                        value-format="yyyy-MM-dd"
                        end-placeholder="结束日期">
                </el-date-picker>-->
                <el-date-picker
                        v-model="value1"
                        type="monthrange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始月份"
                        end-placeholder="结束月份"
                        :picker-options="pickerOptions">
                </el-date-picker>
                <el-button type="primary" size="medium" @click="show()" icon="el-icon-search" plain>搜索</el-button>
            </div>

            <el-container>
                        <div class="box">
                            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                            <div id="chart1" style="height:500px;"></div>
                        </div>

                        <div class="Rbox">
                            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                            <div id="chart2" style="height:500px;"></div>
                        </div>
                        <div class="Rbox">
                            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                            <div id="chart3" style="height:500px;"></div>
                        </div>
            </el-container>
        </div>
    </body>
    <!-- 引入组件库 -->
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
  <!--  <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/index.css">-->
    <!-- 引入组件库 -->

    <script type="text/javascript">

        new Vue({
            el: "#app",
            data: {
                    value1: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '本月',
                        onClick(picker) {
                            picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(new Date().getFullYear(), 0);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setMonth(start.getMonth() - 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            },

            methods:{
                show:function () {
                    axios.post("/report/getMemberCountBetweenDates.do",this.value1).then(res=>{
                        this.$notify({
                            message: res.data.message,
                            type: res.data.flag ? 'success' : "error"
                        });
                        if (res.data.flag) {
                            myChart1.setOption({
                                title: {
                                    text: '会员数量'
                                },
                                tooltip: {},
                                legend: {
                                    data: ['会员数量']
                                },
                                xAxis: {
                                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                    data: res.data.data.months
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '会员数量',
                                    type: 'line',
                                    // data: [820, 932, 901, 934, 1290, 1330, 1320],
                                    // data: res.data.data.memberCount
                                    data: res.data.data.memberCount
                                }]
                            })
                        }
                    });
                },

            }

        });


        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('chart1'));
        var myChart2 = echarts.init(document.getElementById('chart2'));
        var myChart3 = echarts.init(document.getElementById('chart3'));

        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);
        // 显示每个月用户的累加数据
        axios.get("/report/getMemberReport.do").then(res=> {
            // this:$notify({
            //     message: res.data.message,
            //     type: res.data.flag ? 'success' : "error"
            // }),
            myChart1.setOption({
                title: {
                    text: '会员数量'
                },
                tooltip: {},
                legend: {
                    data: ['会员数量']
                },
                xAxis: {
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    data: res.data.data.months
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '会员数量',
                    type: 'line',
                    // data: [820, 932, 901, 934, 1290, 1330, 1320],
                    data: res.data.data.memberCount
                }]
            })

        });
        // 用户年龄分布的数据请求
        axios.get("/report/getMemberAgeReport.do").then((res)=>{
            // 对应 chart2
            // 用户年龄分布
            myChart3.setOption({
                    title: {
                        text: '用户年龄分布',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: res.data.data.memberAge
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: res.data.data.list,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
        });

        // 用户性别分布的数据请求
        axios.get("/report/getMemberSexReport.do").then((res)=>{
            // 对应 chart3
            // 用户性性别分布
            myChart2.setOption(
                {

                    title: {
                        text: '会员性别分布',
                        subtext: '真实数据,加分!',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: res.data.data.memberSex
                    },
                    series: [
                        {
                            name: '用户性别',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: res.data.data.memberCount
                        }
                    ]
                });
        });




    </script>


</html>
